<template>
    <div class="box">
      <a-card title="编辑管理员" style="width: 90%;margin-left: 5%;margin-top: 20px;">
      <template #extra><a href="#">保存</a><a href="#" style="margin-left: 20px;" @click="goback">返回</a></template>
      <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="roles" label="角色" name="roles">
          <a-select v-model:value="formState.roles" placeholder="请选择角色">
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item ref="loginname" label="登录名" name="loginname">
        <a-input v-model:value="formState.loginname" />
      </a-form-item>
      <a-form-item ref="pass" label="密码" name="pass">
        <a-input v-model:value="formState.pass" />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">保存</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">返回</a-button>
      </a-form-item>
     
    </a-form>
    </a-card>
    </div>
  </template>
  
  <script lang="ts">
  import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
  import { Moment } from 'moment';
  import { defineComponent, reactive, ref, toRaw, UnwrapRef } from 'vue';
  import { useRouter } from "vue-router"
  interface FormState {
      roles: '';
    loginname:'',
    pass:''
  }
  export default {
      setup() {
      const formRef = ref();
      const formState= reactive({
          roles: '',
          loginname:'',
          pass:''
      });
      const router=useRouter()
      const goback=()=>{
          router.push('/sys/adminlist')
      }
      const rules = {
  
        loginname: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        pass: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
      };
      const onSubmit = () => {
        formRef.value
          .validate()
          .then(() => {
            console.log('values', formState, toRaw(formState));
          })
          .catch((error: ValidateErrorEntity<FormState>) => {
            console.log('error', error);
          });
      };
      const resetForm = () => {
          router.push('/sys/adminlist')
      };
      return {
          goback,
        formRef,
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
        other: '',
        formState,
        rules,
        onSubmit,
        resetForm,
      };
  }
  }
  </script>
  
  <style>
  .box{
      width: 100%;
      height: 100%;
  }
  </style>